<template>
  <div class="device-edit-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>编辑设备</span>
          <el-button @click="goBack">返回</el-button>
        </div>
      </template>
      
      <el-form :model="deviceForm" :rules="rules" ref="deviceFormRef" label-width="100px">
        <el-form-item label="设备ID" prop="id">
          <el-input v-model="deviceForm.id" disabled />
        </el-form-item>
        
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="deviceForm.name" placeholder="请输入设备名称" />
        </el-form-item>
        
        <el-form-item label="设备类型" prop="type">
          <el-select v-model="deviceForm.type" placeholder="请选择设备类型" style="width: 100%">
            <el-option label="摄像头" value="camera" />
            <el-option label="传感器" value="sensor" />
            <el-option label="门禁" value="access" />
            <el-option label="其他" value="other" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="IP地址" prop="ip">
          <el-input v-model="deviceForm.ip" placeholder="请输入设备IP地址" />
        </el-form-item>
        
        <el-form-item label="位置" prop="location">
          <el-input v-model="deviceForm.location" placeholder="请输入设备位置" />
        </el-form-item>
        
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="deviceForm.status">
            <el-radio label="online">在线</el-radio>
            <el-radio label="offline">离线</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="备注" prop="remark">
          <el-input 
            v-model="deviceForm.remark" 
            type="textarea" 
            placeholder="请输入设备备注信息"
            :rows="3"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

export default {
  name: 'DeviceEdit',
  setup() {
    const router = useRouter()
    const deviceFormRef = ref(null)
    
    const deviceForm = reactive({
      id: '',
      name: '',
      type: '',
      ip: '',
      location: '',
      status: 'online',
      remark: ''
    })
    
    const rules = {
      name: [
        { required: true, message: '请输入设备名称', trigger: 'blur' }
      ],
      type: [
        { required: true, message: '请选择设备类型', trigger: 'change' }
      ],
      ip: [
        { required: true, message: '请输入IP地址', trigger: 'blur' }
      ],
      location: [
        { required: true, message: '请输入设备位置', trigger: 'blur' }
      ]
    }
    
    // 模拟获取设备详情
    const getDeviceDetail = () => {
      // 从路由参数获取设备ID
      const deviceId = router.currentRoute.value.query.id || '1'
      
      // 模拟设备数据
      deviceForm.id = deviceId
      deviceForm.name = '摄像头001'
      deviceForm.type = 'camera'
      deviceForm.ip = '192.168.1.101'
      deviceForm.location = '大厅'
      deviceForm.status = 'online'
      deviceForm.remark = '大厅入口处监控摄像头'
    }
    
    const submitForm = async () => {
      if (!deviceFormRef.value) return
      
      await deviceFormRef.value.validate((valid) => {
        if (valid) {
          // 模拟提交操作
          ElMessage.success('设备信息保存成功')
          router.push('/devices')
        } else {
          ElMessage.error('请填写完整信息')
        }
      })
    }
    
    const resetForm = () => {
      deviceFormRef.value.resetFields()
    }
    
    const goBack = () => {
      router.go(-1)
    }
    
    onMounted(() => {
      getDeviceDetail()
    })
    
    return {
      deviceFormRef,
      deviceForm,
      rules,
      submitForm,
      resetForm,
      goBack
    }
  }
}
</script>

<style scoped>
.device-edit-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>